<!-- 自适应高度 -->
<div class="vip-page-bg 1" appDebounceClick (debounceClick)="closeClick()" *ngIf="tagData">
  <div class="section" [ngStyle]="tagData?.sessionCssStyle | styleFilter">
    <img *ngIf="tagData.closeIcon" [src]="tagData.closeIcon" onerror="this.src='assets/icon/nav_icon_close@3x.png'"
      [ngStyle]="tagData.closeIconCssStyle|styleFilter" appDebounceClick (debounceClick)="closeClick()" />
    <div class="title" [ngStyle]="tagData.cssStyle | styleFilter">
      {{ tagData.title }}
    </div>

    <div class="content 1" [ngStyle]="tagData.contentCssStyle|styleFilter">
      <div class="item" *ngFor="let item of tagData.content" [ngClass]="{'cssType1': tagData.data?.cssType!==undefined}"
        [ngStyle]="tagData.itemCssStyle|styleFilter">
        <h3 *ngIf="item.label" class="item-title" [ngStyle]="tagData.itemInnerBoxCssStyle|styleFilter"><i class="icon"
            [ngStyle]="item.iconCssStyle|styleFilter"></i> <span [ngStyle]="item.labelCssStyle | styleFilter">{{
            item.label }}</span></h3>
        <ng-container *ngIf="item.content">
          <span *ngIf="item.content" [ngStyle]="item.contentCssStyle | styleFilter"> {{ item.content }}</span>
        </ng-container>
        <!--次数-->
        <ng-container *ngIf="item.count">
          <span *ngIf="item.count" [ngStyle]="item.countCssStyle | styleFilter"> {{ item.count }}</span>
        </ng-container>
        <ng-container *ngIf="item.content1">
          <span *ngIf="item.content1" [ngStyle]="item.content1CssStyle | styleFilter"> {{ item.content1 }}</span>
        </ng-container>
        <!--金额-->
        <ng-container *ngIf="item.money">
          <span *ngIf="item.money" [ngStyle]="item.moneyCssStyle | styleFilter"> {{ item.money }}</span>
        </ng-container>
        <ng-container *ngIf="item.content2">
          <span *ngIf="item.content2" [ngStyle]="item.content2CssStyle | styleFilter"> {{ item.content2 }}</span>
        </ng-container>

      </div>
    </div>
    <div class="bottom-box" *ngIf="tagData.button">
      <button class="bottom-btn" *ngIf="tagData.button?.label" appDebounceClick (debounceClick)="buttonClick(tagData.button)">
        <label class="btn-label">{{tagData.button?.label}}</label>
      </button>
    </div>
  </div>
</div>

<!-- 详情顾问信息推荐 -->
<ng-container *ngIf="tipData">
  <div class="vip-page-bg 2" appDebounceClick (debounceClick)="closeClick()">
    <ng-container *ngIf="tipData.styleName === 'tipsDivTagLJ'">
      <div class="section" [ngStyle]="tagData?.sessionCssStyle | styleFilter">
        <p class="tip-title-lj">{{tipData.title}}</p>
        <p class="tip-content-lj">{{tipData.content}}</p>
        <!-- 顾问 -->
        <div class=" counselor-bg-lj">
          <img src="{{tipData.downTag?.icon}}" alt="" class="counselor-avatar-lj"
            onerror="onerror=null;src='assets/img/headtrait.png'">
          <div class="counselor-content">
            <!-- {{tipData.downTag?.label?.tag}} -->
            <p class="counselor-name-lj">{{tipData.downTag?.name}}<span
                class="counselor-tag">{{tipData.downTag?.tag}}</span></p>
            <p class="counselor-service"><span>{{tipData.downTag?.label?.firstText}}</span><span
                class="num-o">{{tipData.downTag?.label?.secondText}}</span><span>{{tipData.downTag?.label?.thirdText}}</span>
            </p>

          </div>
          <img class="counselor-call-lj" *ngIf="tipData.downTag?.phone?.text"
            src="assets/icon/{{tipData.downTag?.phone?.icon}}" alt=""
            appDebounceClick (debounceClick)="counselorCall(tipData.downTag?.phone?.text)">
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="tipData.styleName === 'tipsDivTag'">
      <div class="section">
        <p class="tip-title">{{tipData.title}}</p>
        <p class="tip-content">{{tipData.content}}</p>
        <!-- 顾问 -->
        <div class="counselor-bg">
          <img src="{{tipData.downTag?.icon}}" alt="" class="counselor-avatar"
            onerror="onerror=null;src='assets/img/headtrait.png'">
          <div class="counselor-content">
            <p class="counselor-name">{{tipData.downTag?.name}}</p>
            <p class="counselor-service"> <span>{{tipData.downTag?.label?.firstText}}</span> <span
                class="num-o">{{tipData.downTag?.label?.secondText}}</span>
              <span>{{tipData.downTag?.label?.thirdText}}</span>
            </p>

          </div>
          <img class="counselor-call" *ngIf="tipData.downTag?.phone?.text"
            src="assets/icon/{{tipData.downTag?.phone?.icon}}" alt=""
            appDebounceClick (debounceClick)="counselorCall(tipData.downTag?.phone?.text)">
        </div>
      </div>
    </ng-container>

  </div>

</ng-container>

<!-- 信息 会员购买 -->
<ng-container *ngIf="vipData">
  <div class="vip-page-bg 3 " appDebounceClick (debounceClick)="closeClick()">
    <div class="vip-bg" [ngStyle]="tagData?.sessionCssStyle | styleFilter">
      <!-- <div class="vip-close-bg" appDebounceClick (debounceClick)="closeClick()">
        <img src="assets/icon/remind_icon_close@3x.png" class="vip-close" alt="">  
      </div> -->
      <div class="vip-data" *ngIf="vipData.title && vipData.title.length > 0">
        <ng-container *ngFor="let item of vipData.title; let i = index">
          <p class="vip-data-label" *ngIf="item.label">{{item.label}}</p>
          <!-- 购买单个信息 -->
          <ng-container *ngIf="item.type === 'message'">
            <div class="vip-data-message-bg" [ngStyle]="item.cssStyle | styleFilter">
              <div class="vip-data-left">
                <p class="vip-data-price">{{item.data.label}}</p>
                <p class="vip-data-tip">{{item.data.labTip}}</p>
              </div>
              <div class="vip-data-message-btn" *ngIf="item.data?.button"
                [ngStyle]="item.data?.button?.cssStyle | styleFilter" appDebounceClick (debounceClick)="onVipClick(item.data.button)">
                {{item.data.button.label}}
              </div>
            </div>
          </ng-container>
          <!-- 开通会员 -->
          <ng-container *ngIf="item.type === 'member'">
            <div class="vip-data-member-bg" [ngStyle]="item.cssStyle | styleFilter">
              <div class="vip-data-left">
                <p class="vip-data-title">
                  <img class="vip-icon" src="assets/img/vip_serve.png" alt="">
                  <span>{{item.data.label}}</span>
                </p>
                <span class="vip-data-tip-member" [innerHTML]='item.data.labTip | parseStyle'></span>
              </div>
              <div class="vip-data-memmber-btn" *ngIf="item.data?.button" appDebounceClick (debounceClick)="onVipClick(item.data.button)">
                {{item.data.button.label}}
              </div>
            </div>
          </ng-container>
          <!-- 套餐剩余次数 -->
          <ng-container *ngIf="item.type === 'exchange'">
            <div class="vip-data-message-bg vip-data-exchange-bg" [ngClass]="{'vip-data-exchange-bg-more': i>0}"
              [ngStyle]="item.cssStyle | styleFilter">
              <div class="vip-data-left">
                <p class="vip-data-exchange"><span class="vip-data-exchange-lable">{{item.data.label}}</span><span
                    class="vip-data-exchange-number">{{item.data.number}}</span></p>
                <p class="vip-data-tip">{{item.data.labTip}}</p>
              </div>
              <div class="vip-data-exchange-btn" *ngIf="item.data?.button"
                [ngStyle]="item.data?.button?.cssStyle | styleFilter" appDebounceClick (debounceClick)="onVipClick(item.data.button)">
                {{item.data.button.label}}
              </div>
            </div>
          </ng-container>

          <!-- 购买套餐 -->
          <ng-container *ngIf="item.type === 'by_exchange'">
            <div class="vip-data-by-exchange-bg" [ngStyle]="item.cssStyle | styleFilter">
              <div class="vip-data-exchange-left">
                <p class="vip-data-exchange-discount">{{item.data.discount}}</p>
                <p class="vip-data-exchange-price" *ngIf="item.data?.price"><span
                    style="font-size: 0.63rem;">￥</span>{{item.data.price}}</p>
              </div>
              <div class="vip-data-exchange-right">
                <div class="right-l">
                  <p class="right-label">{{item.data.label}}</p>
                  <p class="right-tip">{{item.data.labTip}}</p>
                </div>
                <p class="right-button" *ngIf="item.data.button?.label && item.data.button?.label.length > 0"
                  [ngStyle]="item.data.button?.cssStyle | styleFilter" appDebounceClick (debounceClick)="onVipClick(item.data.button)">
                  {{item.data.button.label}}</p>

              </div>
            </div>

          </ng-container>

        </ng-container>
      </div>



      <!-- 底部客服 -->
      <div *ngIf="vipData.button?.data" class="middle-line"></div>
      <div class="vip-bottom" *ngIf="vipData.button?.data">
        <img src="{{vipData.button?.data?.headIcon}}" alt="" class="vip-counselor-avatar"
          onerror="onerror=null;src='assets/img/headtrait.png'">
        <div class="vip-counselor-content">
          <p class="vip-counselor-name">{{vipData.button?.data?.name}}</p>
          <p class="vip-counselor-service"> {{vipData.button?.data?.label}}</p>
        </div>
        <img class="vip-counselor-call" *ngIf="vipData.button?.data?.phone?.tel"
          src="assets/icon/{{vipData.button?.data?.phone?.icon}}" alt=""
          appDebounceClick (debounceClick)="counselorCall(vipData.button?.data?.phone?.tel)">
      </div>

    </div>
  </div>

</ng-container>